<template>
  <div class="content">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="crumbs">
      <el-breadcrumb-item :to="{ path: '/hotel' }">酒店</el-breadcrumb-item>
      <el-breadcrumb-item
        v-if="hotel.city"
        :to="{ path: '/hotel?cityName=' + hotel.city.name }"
        >{{ hotel.city.name }}酒店</el-breadcrumb-item
      >
      <el-breadcrumb-item>{{ hotel.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <h2>
      {{ hotel.name }}
    </h2>
    <span>
      {{ hotel.alias }}
    </span>
    <div><i class="iconfont iconlocation"></i> 位置：{{ hotel.address }}</div>
    <el-row type="flex" class="image">
      <el-col :span="16">
        <img class="first-img" :src="photoList[photoIndex]" alt="" />
      </el-col>
      <el-col :span="8" class="imgs">
        <el-row type="flex">
          <el-col :span="12" v-for="(photo, index) in photoList" :key="index">
            <img :src="photo" alt="" @click="photoIndex = index" />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-table :data="hotel.products" style="width: 100%" class="table">
      <el-table-column prop="name" label="价格来源" width="430">
      </el-table-column>
      <el-table-column prop="bestType" label="低价房型" width="430">
      </el-table-column>
      <el-table-column label="最低价格/每晚">
        <template slot-scope="scope">
          <span>￥{{ scope.row.price }}</span> 起
          <i class="el-icon-arrow-right"></i>
        </template>
      </el-table-column>
    </el-table>
    <MapUi :location="hotel.location" />

    <div class="detail">
      <el-row class="detail_item" type="flex">
        <el-col :span="4">基本信息</el-col>
        <el-col :span="20">
          <el-row type="flex">
            <el-col>入住时间: 14:00之后</el-col>
            <el-col>离店时间: 12:00之前</el-col>
            <el-col
              >{{ hotel.creation_time }} / {{ hotel.renovat_time }}</el-col
            >
            <el-col>酒店规模: {{ hotel.roomCount }}间客房</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="detail_item" type="flex">
        <el-col :span="4">主要设施</el-col>
        <el-col :span="20">
          <el-tag type="info" v-for="info in hotel.hotelassets" :key="info.id">
            {{ info.name }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row class="detail_item" type="flex">
        <el-col :span="4">停车服务</el-col>
        <el-col :span="20" v-if="hotel.parking">
          {{ hotel.parking }}
        </el-col>
        <el-col :span="20" v-else>-</el-col>
      </el-row>

      <el-row class="detail_item" type="flex">
        <el-col :span="4">品牌信息</el-col>
        <el-col :span="20" v-if="hotel.hotelbrand">{{
          hotel.hotelbrand.name
        }}</el-col>
        <el-col :span="20" v-else>-</el-col>
      </el-row>
    </div>
    <div class="comment-head">{{ hotel.all_remarks }}条真实用户评论</div>
    <el-row type="flex" class="commentScore">
      <el-col :span="4">
        <el-row>总评数：{{ hotel.all_remarks }}</el-row>
        <el-row>好评数：{{ hotel.good_remarks }}</el-row>
        <el-row>差评数：{{ hotel.bad_remarks }}</el-row>
      </el-col>
      <el-col :span="5" class="rate">
        <el-rate
          v-model="hotel.stars"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}"
        >
        </el-rate>
        <div class="recommend">推荐</div>
      </el-col>
      <el-col :span="3"
        ><HotelCircle
          v-if="hotel.scores"
          text="环境"
          :score="hotel.scores.environment"
        />
      </el-col>
      <el-col :span="3"
        ><HotelCircle
          v-if="hotel.scores"
          text="产品"
          :score="hotel.scores.product"
        />
      </el-col>
      <el-col :span="3"
        ><HotelCircle
          v-if="hotel.scores"
          text="服务"
          :score="hotel.scores.service"
      /></el-col>
    </el-row>
    <HotelComment
      v-for="comment in comments"
      :key="comment.id"
      :commentData="comment"
    />
  </div>
</template>

<script>
export default {
  head() {
    return {
      // 单页面加载样式
      link: [],
      // 单页面加载脚本
      script: [
        {
          //加载高德地图api
          src:
            "https://webapi.amap.com/maps?v=1.4.15&key=e5dacc2c74df594a9332bd836b30b897",
          body: true,
        },

        {
          //加载高德地图ui组件库
          src: "https://webapi.amap.com/ui/1.1/main.js",
          body: true,
        },
      ],
    };
  },
  data() {
    return {
      hotel: {},
      map: {},
      cpoint: [],
      comments: [],
      photoList: [
        "http://157.122.54.189:9093/images/hotel-pics/1.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/2.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/3.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/4.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/5.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/6.jpeg",
      ],
      photoIndex: 0,
    };
  },
  mounted() {
    this.$axios({
      url: "/hotels",
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      // console.log(res);
      this.hotel = res.data.data[0];
    });

    this.$axios({
      url: "/hotels/comments",
    }).then((res) => {
      console.log(res);
      this.comments = res.data.data;
    });
  },
  created() {},
};
</script>
<style lang="less" scoped>
.content {
  margin: 0 auto;
  width: 1000px;
  color: #666;
  .crumbs {
    padding: 20px 0;
  }
  h2 {
    font-weight: normal;
    color: #333;
  }
  .image {
    margin: 40px 0;
    .first-img {
      width: 640px;
      height: 360px;
      object-fit: cover;
    }
    .imgs {
      .el-row {
        flex-wrap: wrap;
      }
      .el-col {
        padding: 0 10px;
      }
      img {
        cursor: pointer;
        border-radius: 5px;
        width: 160px;
        height: 110px;
        margin-bottom: 10px;
      }
    }
  }
  .table {
    margin: 40px 0;
    span {
      color: #f90;
    }
    .el-icon-arrow-right {
      color: #f90;
    }
  }
}
#container {
  width: 650px;
  height: 360px;
}
.detail {
  margin: 40px 0;
  .detail_item {
    border-bottom: 1px solid #ccc;
    & > .el-col {
      padding: 20px 10px;
    }
    & > .el-col:first-child {
      color: #000;
    }
    .el-tag {
      margin-right: 10px;
    }
  }
}

.comment-head {
  font-weight: 700;
}
.commentScore {
  padding: 20px 0;
  .rate {
    position: relative;
    display: flex;
    align-items: center;
    .recommend {
      position: absolute;
      left: 20px;
      border: 2px solid #fa3;
      text-align: center;
      line-height: 70px;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      opacity: 0.25;
      transform: rotate(-30deg);
      color: #f90;
      font-size: 24px;
    }
  }
}
</style>